import { useState, useEffect, useRef } from "react";
import { Dropdown, Button, Divider } from "antd";
import moment from "moment";
import CommonTable from "@/components/CommonTable";
import CommonPagination from "@/components/CommonPagination";
import CommonLoading from "@/components/CommonLoading";
import { queryConfigPage } from "../../service";
import StoreSettingModal from "../StoreSettingModal";

const initPagination = {
	current: 1,
	total: 0,
	pageSize: 20,
	showQuickJumper: true,
	pageSizeOptions: [10, 20, 50, 500]
};

const dateFormat = "YYYY-MM-DD HH:mm:ss";

export default ({ visible, query, item, divEl }) => {
	const [loading, setLoading] = useState(false);
	const [data, setData] = useState([]);
	const [recordData, setRecordData] = useState({}); //单行数据
	const [viewVisible, setViewVisible] = useState(false);
	const [pagination, setPagination] = useState(null); //分页数据

	const stageParams = useRef({});

	const columns = [
		{
			title: "序号",
			dataIndex: "index",
			key: "index",
			fixed: "left",
			width: 60,
			render: (t, r, i) => i + 1
		},

		{
			title: "操作人",
			dataIndex: "operationName",
			key: "operationName",
			width: 120
		},
		{
			title: "操作时间",
			dataIndex: "operationTime",
			key: "operationTime",
			width: 120
		},

		{
			title: "操作",
			key: "id",
			dataIndex: "id",
			width: 120,
			fixed: "right",
			render: (_, record) => (
				<div className="flex" style={{ alignItems: "center" }}>
					<Button type="link" onClick={() => viewSnapshot(record)}>
						查看快照
					</Button>
				</div>
			)
		}
	];

	useEffect(() => {
		setPagination({
			...(pagination || initPagination),
			current: 1
		});
	}, [query]);

	useEffect(() => {
		if (visible) {
			if (pagination) {
				getTableListFunc();
			}
		}
	}, [visible, pagination]);

	const getTableListFunc = async () => {
		setLoading(true);
		const params = {
			...query,
			businessId: item.id,
			size: pagination.pageSize,
			current: pagination.current
		};
		if (params.operationTime) {
			params.gtOperationTime = moment(params.operationTime[0]._d).format(dateFormat);
			params.ltOperationTime = moment(params.operationTime[1]._d).format(dateFormat);
		}
		params.operationTime = undefined;
		stageParams.current = params;
		const { data, success } = await queryConfigPage(params);
		if (success) {
			const { records = [], total = 0 } = data || {};
			pagination.total = total;
			setData(records);
		}
		setLoading(false);
	};

	//查看快照
	const viewSnapshot = record => {
		setViewVisible(true);
		setRecordData(record);
	};

	//店铺编辑设置
	const StoreSettingModalProps = {
		recordData,
		visible: viewVisible,
		type: "view",
		handleOk() {
			setViewVisible(false);
			setPagination({ ...pagination, current: 1 });
			setRecordData({});
		},
		handleCancel() {
			setViewVisible(false);
			setRecordData({});
		}
	};

	//表格
	const tableProps = {
		data,
		columns,
		// handleRowKey(record) {
		// 	return record.matchingGoods.goodsId + record.platformGoods.id;
		// },
		scroll: { y: 300 }
	};

	const pageProps = {
		pagination,
		handleChange(current, size) {
			setPagination({
				...pagination,
				current: current == pagination.current ? 1 : current,
				pageSize: size
			});
		}
	};

	return (
		<>
			<CommonTable {...tableProps} />
			<Divider style={{ marginTop: "24px" }} />
			<div style={{ height: "65px", paddingTop: "20px" }}>
				<CommonPagination {...pageProps} />
			</div>
			<StoreSettingModal {...StoreSettingModalProps} />
			<CommonLoading loading={loading} />
		</>
	);
};
